<template>
  <div class="zhtt-box">
    <div  @click="showPersonModal"><EllipsisOutlined></EllipsisOutlined></div>
    <a-modal v-model:visible="visible"
             title="请选择负责人"
             okText="确定"
             cancelText="关闭"
             @ok="handleOk">
      <a-table v-if="isShowCheckBox" :columns="columns" :data-source="dataList"  size="small" :row-selection="rowSelection">
        <template #action="{ record }">
          <span>
            <a @click="toSelected(record)">选择</a>
          </span>
        </template>
      </a-table>
      <a-table v-if="!isShowCheckBox" :columns="columns" :data-source="dataList"  size="small">
        <template #action="{ record }">
          <span>
            <a @click="toSelected(record)">选择</a>
          </span>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ResultModel } from '@/common/result.model'
import { PersonApi } from '@/views/person/js/person-api'
import { PersonModel } from '@/views/person/js/person-model'
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    slots: {
      title: 'customTitle',
      customRender: 'name'
    }
  },
  {
    title: '联系人',
    dataIndex: 'contactsPerson',
    key: 'contactsPerson'
  },
  {
    title: '操作',
    key: 'action',
    slots: { customRender: 'action' }
  }
]
export default defineComponent({
  name: 'person-modal',
  data () {
    return {
      selectedRows: null,
      rowSelection: {
        onSelect: (record: PersonModel, selected: boolean, selectedRows: PersonModel[]) => {
          // @ts-ignore
          this.updateSelectedRwos(selectedRows)
        },
        onSelectAll: (selected: boolean, selectedRows: PersonModel[], changeRows: PersonModel[]) => {
          // @ts-ignore
          this.updateSelectedRwos(selectedRows)
        }
      }
    }
  },
  props: {
    isShowCheckBox: {
      type: Boolean,
      default: false
    }
  },
  emits: {
    onSelectedPerson (item: PersonModel | PersonModel[]) {
      return item
    }
  },
  methods: {
    toSelected (item: PersonModel | any) {
      if (item) {
        this.$emit('onSelectedPerson', item)
      } else {
        this.$emit('onSelectedPerson', this.selectedRows)
      }
      this.visible = false
    },
    handleOk () {
      this.toSelected(null)
      this.visible = false
    },
    updateSelectedRwos (rows: PersonModel[]) {
      this.selectedRows = rows
    }
  },
  setup () {
    const visible = ref<boolean>(false)
    const dataList = ref([])
    // const dataList = ref<any[]>([])
    const pageQuery = (name = null) => {
      PersonApi.query(1, 30).then(response => {
        console.log(response)
        if (ResultModel.isSuccessPageInfo(response)) {
          // eslint-disable-next-line no-return-assign
          response.data && response.data.dataList && response.data.dataList.forEach((item: PersonModel) => item.key = item.id)
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          dataList.value = response.data.dataList
        }
      })
    }
    pageQuery()
    const showPersonModal = () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      visible.value = true
      pageQuery()
    }
    return {
      dataList,
      visible,
      showPersonModal,
      columns
    }
  }
})
</script>

<style scoped lang="less">
</style>
